<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>京东WebApp</title>

    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <div class="jd_container">
        <!--京东头部样式布局-->
        <div class="jd_header">
            <a href="javascript:void(0)" class="header_logo"></a>
            <input type="search" class="header_search" placeholder="请输入内容">
            <span class="header_glass"></span>
            <a href="javascript:void(0)" class="header_login">登录</a>
        </div>

        <!--轮播图-->
        <div class="jd_banner">
            <ul class="banner_images clearfix">
                <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
            </ul>

            <ul class="banner_index">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <!--导航栏-->
        <div class="jd_nav">
            <ul class="clearfix">
                <li><a href="#"><img src="images/nav0.png" alt=""><p>分类查询</p></a></li>
                <li><a href="#"><img src="images/nav1.png" alt=""><p>分类查询</p></a></li>
                <li><a href="#"><img src="images/nav2.png" alt=""><p>分类查询</p></a></li>
                <li><a href="#"><img src="images/nav3.png" alt=""><p>分类查询</p></a></li>
                <li><a href="#"><img src="images/nav4.png" alt=""><p>分类查询</p></a></li>
                <li><a href="#"><img src="images/nav5.png" alt=""><p>分类查询</p></a></li>
                <li><a href="#"><img src="images/nav6.png" alt=""><p>分类查询</p></a></li>
                <li><a href="#"><img src="images/nav7.png" alt=""><p>分类查询</p></a></li>
            </ul>
        </div>

        <!--京东主体样式-->
        <div class="jd_main">
            <!--第一个主体的样式不同-->
            <div class="main_content">
                <div class="content_top clearfix">
                    <span></span>
                    <p>掌上秒杀</p>
                    <ul class="clearfix">
                        <li>0</li>
                        <li>0</li>
                        <li>:</li>
                        <li>0</li>
                        <li>0</li>
                        <li>:</li>
                        <li>0</li>
                        <li>0</li>
                    </ul>
                    <span>更多&gt</span>
                </div>
                <div class="content_bootom">
                    <ul class="clearfix">
                        <li><a href="#"><img src="images/detail01.jpg" alt=""></a>
                            <p class="teshu">¥10.00</p>
                            <p>¥100.00</p>
                        </li>
                        <li><a href="#"><img src="images/detail02.jpg" alt=""></a>
                            <p class="teshu">¥10.00</p>
                            <p>¥100.00</p>
                        </li>
                        <li><a href="#"><img src="images/detail01.jpg" alt=""></a>
                            <p class="teshu">¥10.00</p>
                            <p>¥100.00</p>
                        </li>
                    </ul>
                </div>
            </div>

            <!--下面三个主体的样式类似-->
            <div class="main_content">
                <div class="content_top">
                    <span>京东超市</span>
                </div>
                <div class="content_bootom">
                    <ul class="clearfix">
                        <li class="f_l b_r b_t"><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
                        <li class="f_r b_b b_t"><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
                        <li class="f_r"><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="main_content">
                <div class="content_top">
                    <span>京东超市</span>
                </div>
                <div class="content_bootom">
                    <ul class="clearfix">
                        <li class="f_r"><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
                        <li class="f_l b_r b_b"><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
                        <li class="f_l b_r"><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="main_content">
                <div class="content_top">
                    <span>京东超市</span>
                </div>
                <div class="content_bootom">
                    <ul class="clearfix">
                        <li class="f_r"><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
                        <li class="f_l b_r b_b"><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
                        <li class="f_l b_r"><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>